<template>
  <!--  估价对话框-->
  <a-modal :footer="null" :visible="modalData.visible" title="估价参考" @cancel="hideModal">

    <a-row class="row">
      <a-col :span="4" class="rowLabel">品牌：</a-col>
      <a-col :span="10">{{ modalData.detail.brandName }}</a-col>
    </a-row>
    <a-row class="row">
      <a-col :span="4" class="rowLabel">品类：</a-col>
      <a-col :span="10">{{
          modalData.detail.category === 1 ? '手机' : modalData.detail.category === 2 ? '平板' : ''
        }}
      </a-col>
    </a-row>
    <a-row class="row">
      <a-col :span="4" class="rowLabel">型号：</a-col>
      <a-col :span="10">{{ modalData.detail.modelName }}</a-col>
    </a-row>
    <a-row class="row">
      <a-col :span="4" class="rowLabel">预估价格：</a-col>
      <a-col :span="10">
        <b style="color: #f50;font-size: 16px">￥{{ modalData.appraiseValue }}</b>
      </a-col>
      <a-col :span="10">
        <ZTooltip text-align="left" :text="getAllGrade()"></ZTooltip>
      </a-col>
    </a-row>
    <!--  选择选项估价-->
    <div style="height: 400px;overflow: auto">
      <a-collapse v-model:activeKey="modalData.activeKey" accordion>
        <a-collapse-panel v-for="(q,index) in modalData.collapsePanelList" :key="index">
          <!--        折叠面板标题-->
          <template #header>
            <div style="display: flex;flex-direction: row;justify-content: space-between;width: 100%">
              <span style="display: inline-block;max-width: 200px;text-overflow: ellipsis;;white-space: nowrap;overflow-x: hidden">{{ `${index + 1}.${q.questionName}` }}</span>
              <ZTooltip :display="'inline-block'" v-if="q.selectType===0" :text="getOptionName(q.options,q.selectedOptionId)"></ZTooltip>
              <ZTooltip :display="'inline-block'" v-if="q.selectType===1" :text="getOptionsName(q.options,q.selectedOptionIds)"></ZTooltip>
            </div>
          </template>
          <!--        多选-->
          <a-checkbox-group v-if="q.selectType===1"
                            v-model:value="q.selectedOptionIds"
                            style="width: 100%" @change="multipleOptionChange(q.options,q.selectedOptionIds,index)">
            <div v-for="o in q.options">
              <a-checkbox :disabled="o.choosable===0" :value="o.id">
                <ZTooltip :display="'inline-block'" max-width="350px" text-align="left" :text="`${o.optionName} 成色(${formatQuestionInfo('grade',o.grade)})`"></ZTooltip>
                <ZTooltip :display="'inline-block'" max-width="350px" text-align="left" :tColor="'#ff0000'" v-if="o.choosable===0" :text="`(不可选理由：${o.reason})`"></ZTooltip>
              </a-checkbox>
            </div>
          </a-checkbox-group>
          <!--        单选-->
          <a-radio-group v-if="q.selectType===0"
                         v-model:value="q.selectedOptionId"
                         style="width: 100%" @change="singleOptionChange(q.options,q.selectedOptionId,index)">
            <div v-for="o in q.options">
              <a-radio :disabled="o.choosable===0" :value="o.id">
                <ZTooltip max-width="350px" text-align="left" :text="`${o.optionName} 成色(${formatQuestionInfo('grade',o.grade)})`"></ZTooltip>
                <ZTooltip max-width="350px" text-align="left" :tColor="'#ff0000'" v-if="o.choosable===0" :text="`(不可选理由：${o.reason})`"></ZTooltip>
              </a-radio>
            </div>
          </a-radio-group>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </a-modal>

</template>

<script setup>
import {reactive, ref, watch} from "vue";
import {modelEvaluateApi} from "/@/views/business/evaluate/model-evaluate/model-evaluate";
import ZTooltip from "/src/views/support/common-component/z-tooltip.vue"
import _ from 'lodash';
import {formatQuestionInfo} from "/@/views/business/evaluate/question/question-api";

const modalDataDefault = {
  evaluateId: undefined,
  appraiseValue: 0,
  activeKey: 0,
  visible: false,
  detail: {},
  collapsePanelList: [],
};
const modalData = reactive({...modalDataDefault});

async function showModal(record) {
  modalData.evaluateId = record.id;
  const {data} = await modelEvaluateApi.detail(modalData.evaluateId);
  data.questionContext = JSON.parse(data.questionContext);
  Object.assign(modalData.detail, data);
  modalData.visible = true;
  modalData.collapsePanelList[0] = getDetailClone().questionContext[0];
}

function hideModal() {
  Object.assign(modalData, modalDataDefault);
  modalData.collapsePanelList = [];
}

function getOptionName(options, id) {
  let name = '';
  options.forEach(item => {
    if (item.id === id) {
      name = item.optionName;
    }
  })
  return name;
}

function getOptionsName(options, ids) {
  let list = [];
  if (ids && ids.length) {
    options.forEach(item => {
      if (ids.findIndex(i => i === item.id) !== -1) {
        list.push(item.optionName);
      }
    })
  }
  return list.join(',');
}

function getAllGrade(){
  const list = [];
  modalData.collapsePanelList.forEach(q=>{
    if (q?.selectedOptionIds&&q?.selectedOptionIds.length){
      q.options.forEach(item => {
        if (q?.selectedOptionIds.findIndex(i => i === item.id) !== -1) {
          list.push(formatQuestionInfo('grade',item.grade));
        }
      })
    }
    if (q?.selectedOptionId){

      q.options.forEach(item => {
        if (item.id === q?.selectedOptionId) {
          list.push(formatQuestionInfo('grade',item.grade));
        }
      })
    }
  });
  return list.join(',');
}

function multipleOptionChange(options, ids, index) {
  console.log(options, ids, index)
  modalData.appraiseValue = 0;
  evaluateSubmit();
}

function singleOptionChange(options, id, index) {
  let option = {};
  modalData.appraiseValue = 0;
  options.forEach(o => {
    if (o.id === id) {
      option = o;
    }
  });
  if (option.jump === 'jumpToNext') {
    if (index + 1 === modalData.collapsePanelList.length && modalData.collapsePanelList.length < modalData.detail.questionContext.length) {
      modalData.collapsePanelList[index + 1] = getDetailClone().questionContext[index + 1];
      modalData.activeKey = index + 1;
    }
  }
  if (option.jump === 'jumpToEnd') {
    modalData.collapsePanelList.splice(index + 1, modalData.collapsePanelList.length - (index + 1));
    modalData.activeKey = index;
  }
  evaluateSubmit();
}

async function evaluateSubmit() {
  const optionIds = [];
  modalData.collapsePanelList.forEach(q => {
    if (q?.selectedOptionId) {
      optionIds.push(q?.selectedOptionId);
    }
    if (q?.selectedOptionIds) {
      optionIds.push(...q?.selectedOptionIds);
    }
  });
  const {data} = await modelEvaluateApi.appraise(modalData.evaluateId, {optionIds: optionIds.join(',')});
  modalData.appraiseValue = data;
}

function getDetailClone() {
  return _.cloneDeep(modalData.detail);
}

defineExpose({
  showModal,
});

watch(
    () => modalData.activeKey,
    value => {
      console.log('改变', modalData.activeKey);
      // modalData.detail.questionContext
    }
)
</script>


<style lang="less" scoped>

.row {
  margin-bottom: 8px;
  align-items: center;

  .rowLabel {
    text-align: right;
    padding-right: 8px;

    .req {
      color: red;
    }
  }
}

</style>